
/**
 * 描述座位
 */
class Seat{
   constructor(x,y){
       this.x = x
       this.y = y
       this.type = 0  //座位类型 0:未分配 1:普通座位 2:过道
       this.selected = false //当前座位是否为指定状态
    }
}
/**
 * 描述座位选择面板
 */
class SeatSelector{
    //构造器
    constructor(rows,cols,canvasId){
        this.rows = rows
        this.cols = cols
        this.canvas = document.getElementById(canvasId)
        this.cvs = canvas.getContext('2d')
        //自定义一些属性
        this.seatSize = 20 //指定每一个座位得宽高
        this.margin = 5 //座位之间得缝隙

        //初始化座位模板 (二维数组)
         this.seats = []
         for(let i = 0;i < rows; i++ ){
            let row = []
            for(let j = 0;j < cols; j++){
                row.push(new Seat(i,j))
            }
            this.seats.push(row)
         }
         console.log(this.seats)

        //为canvas初始化width、height
        this.canvas.width = cols * this.seatSize + (cols + 1) * this.margin
        this.canvas.height = rows * this.seatSize + (rows + 1) * this.margin
        this.canvas.style.display = 'block'
        //为canvas绑定点击事件
        this.canvas.addEventListener('mousedown',(event) => {
            let rect = this.canvas.getBoundingClientRect() // 获取canvas矩形区域
            let x = event.clientX - rect.left
            let y = event.clientY - rect.top
            //保存这个起始点
            this.startPoint = {x,y}
        })
        this.canvas.addEventListener('mouseup',(event) => {
            let rect = this.canvas.getBoundingClientRect() // 获取矩形区域
            let x = event.clientX - rect.left
            let y = event.clientY - rect.top
            this.startend = {x,y}
            console.log('起始点：',this.startPoint)
            console.log('结束点:',this.startend)
            //矩形的坐标
            let selectRect = {
                x1:Math.min(this.startPoint.x,this.startend.x),
                y1:Math.min(this.startPoint.y,this.startend.y),
                x2:Math.max(this.startPoint.x,this.startend.x),
                y2:Math.max(this.startPoint.y,this.startend.y)
            }
            console.log(selectRect)
            //遍历每一个座位，判断座位是否在框内
            for(let i = 0;i < this.rows;i++){
                for(let j = 0; j < this.cols;j++){
                    let seat = this.seats[i][j]
                    let top = (i+1)*this.margin + i * this.seatSize
                    let bottom = (i+1)*this.margin + (i+1) * this.seatSize
                    let left = (j+1)*this.margin + j * this.seatSize
                    let right = (j+1)*this.margin + (j+1) * this.seatSize
                    //判断是否在框内
                    if(top>selectRect.y2 || bottom<selectRect.y1 || left>selectRect.x2 || right<selectRect.x1){

                    }else{
                        if(seat.type == 0 ){
                          seat.selected = !seat.selected   
                        }
                    }
                }
            }
            console.log(this.seats)
            this.draw()
        })
    }
    /**
     * 绘制canvas中得内容
     */
    draw(){
        //清除所有像素
        this.cvs.clearRect(0,0,this.canvas.width,this.canvas.height)
       for(let i = 0;i < this.rows;i++){
        for(let j = 0; j < this.cols;j++){
            let seat = this.seats[i][j]
           //设置为普通座位
             if(seat.type == 1){
                this.cvs.fillStyle = '#a11'
                this.cvs.fillRect(
                j * this.seatSize + (j+1) * this.margin,
                i * this.seatSize + (i+1) * this.margin,
                this.seatSize,
                this.seatSize  )
                continue;
             }
            //设置为普通座位
             if(seat.type == 2){
                this.cvs.fillStyle = '#3333'
                this.cvs.fillRect(
                j * this.seatSize + (j+1) * this.margin,
                i * this.seatSize + (i+1) * this.margin,
                this.seatSize,
                this.seatSize  )
                continue;
             }

            //选中座位
            if(seat.selected){
                this.cvs.fillStyle = '#36D'
                this.cvs.fillRect(
                j * this.seatSize + (j+1) * this.margin,
                i * this.seatSize + (i+1) * this.margin,
                this.seatSize,
                this.seatSize  )
            }else{
                this.cvs.fillStyle = '#36D6'
                this.cvs.fillRect(
                j * this.seatSize + (j+1) * this.margin,
                i * this.seatSize + (i+1) * this.margin,
                this.seatSize,
                this.seatSize  )
            }
         }
       }
    }
    //撤销选中
    setNoseat(){
        for(let i = 0;i < this.rows;i++){
            for(let j = 0; j < this.cols;j++){
                let seat = this.seats[i][j]
                seat.selected = false
            }
        }
        this.draw()
    }
    //将座位设置为普通座位
    setputong(){
        for(let i = 0;i < this.rows;i++){
            for(let j = 0; j < this.cols;j++){
                let seat = this.seats[i][j]
                if(seat.selected){
                seat.type = 1
                seat.selected = false        
                }

            }
        }
        this.draw()
    }
    //将座位设置为过道
    setguodao(){
        for(let i = 0;i < this.rows;i++){
            for(let j = 0; j < this.cols;j++){
                let seat = this.seats[i][j]
                if(seat.selected){
                seat.type = 2
                seat.selected = false        
                }

            }
        }
        this.draw()
    }
    //获取座位的字符串
    getSeaTemplateString(){
        let rowNum = 0
        for(let i = 0;i < this.rows;i++){
            //判断当前这一排不是过道的
            let rowData = this.seats[i]  //当前排
            let filtered = rowData.filter(item => {return item.type != 2})
            if(filtered.length == 0){
                continue;
            }
            //记录排号
            rowNum += 1
            let colNum = 0
            for(let j = 0; j < this.cols;j++){
                let seat = this.seats[i][j]
                if(seat.type == 2){
                    seat.name = '过道'
                }else if(seat.type ==1){
                    colNum += 1
                    seat.name = `${rowNum}排${colNum}号`
                }else{
                    console.log('dddddd')
                    throw '还有未选择的座位'
                }
            }
        }
        console.log(this.seats)
        let str = JSON.stringify(this.seats)
        return str
    }
    //获取座位数量
    getseatCount(){
        let count = 0
        for(let i = 0;i < this.rows;i++){
            for(let j = 0; j < this.cols;j++){
                let seat = this.seats[i][j]
                if(seat.type == 1){
                count++;     
                }
            }
       }
       return count
   }
}
export default SeatSelector